<template>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -->
  <div class="homelogin">
    <div class="kuang">
    <h2>前台登录页面</h2>
    <el-form :model="loginObj" :rules="loginRules" ref="ruleFormRef">
      <el-form-item label="UserName:" class="item_label" prop="uname">
        <el-input placeholder="请输入邮箱/手机号码登录" class="item_input" v-model.lazy.trim="loginObj.uname"/>
      </el-form-item>
      <el-form-item label="Password:" class="item_label" prop="upwd">
        <el-input placeholder="请输入登录密码" show-password class="item_input" v-model.lazy.trim="loginObj.upwd"/>
      </el-form-item>
      <el-form-item prop="isAgree">
        <el-checkbox v-model="loginObj.isAgree">已阅读并同意《服务条款》</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" color="darkcyan" class="txtcol" @click="onLogin(ruleFormRef)">登录</el-button>
      </el-form-item>
    </el-form>
      <el-form-item>
        <el-button type="primary" color="red" class="txtcol" @click="gly()">管理员登录</el-button>
      </el-form-item>
    </div>    
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { md5 } from "js-md5";
import { inject, reactive, ref } from "vue";
import { useRouter } from "vue-router";

let loginObj=reactive({
  uname:'',
  upwd:'',
  isAgree:'',
})
const $axios = inject('$axios');
const router = useRouter();
const ruleFormRef=ref('')

const RuleAgreen=(rule,value,callback)=>{
  if(!value){
    callback(new Error('必须勾选该项!'))
  }else{
    callback()
  }
}

const loginRules=reactive({
  uname:[
    {required:true,message:'必须填写登录账号',trigger:'blur'}
  ],
  upwd:[
    {required:true,message:'必须填写密码',trigger:'blur'}
  ],
  isAgree:[
    {validator:RuleAgreen,trigger:'change'}
  ]
})
const onLogin=(forEl)=>{
    // 提取rules的验证规则结果
    // 此写法适用于非setup结构/vue2写法 this.$ref[forEl].validate((val)=>{
    forEl.validate((val)=>{
        // val为true，表示所有的rules验证都通过
        if(val){
            // 整合需要提交给后端的数据
            let data={
                username:loginObj.uname,
                password:md5(loginObj.upwd)
            }
            // 向登录接口发起请求
            $axios.post('/login',data).then((res)=>{
                if(res.code==='200'){
                    router.push('/admin/index');
                    localStorage.setItem('user',JSON.stringify(res.data))
                }else{
                    ElMessage.error(res.msg);
                }
                
            }).catch((error)=>{
                console.log(error);
                
                if(error.response==undefined||error.response.data==undefined){
                    ElMessage.error(error);
                }else{
                    ElMessage.error(error)
                }
                
            })
        }else{
         ElMessage.error('登录失败，请重新登录！')
            return false
            
        }
    })
}
const gly=()=>{
  router.push('/admin')
}
</script>

<style scoped>
.container {
  padding: 16px;
}

/* 小屏幕设备（手机） */
@media (max-width: 767px) {
  .container {
    padding: 8px;
  }
}

/* 中等屏幕设备（平板） */
@media (min-width: 768px) and (max-width: 991px) {
  .container {
    padding: 12px;
  }
}

.homelogin{
  width: 100%;
  height: 100%;
}
.kuang{
  width: 60%;
  height: 60%;
  position: absolute;
  top: 20%;
  left: 20%;
  text-align: center;
}
button{
  width: 100%;
}
</style>